<!-- 产品中心 -->
<template>
  <div class="product">
    <header v-if="Back.product_back"
      :style="'background: url(' + Back.product_back + ') no-repeat 50% 50%;'"
    >
      <span>{{ i18n.navigation.product }}</span>
    </header>
    <p class="headline">{{ i18n.navigation.product }}<span></span></p>
    <div class="products">
      <main>
        <div v-for="val in list" @click="$method.skip('/product_detail?id='+val.id)" :key="val.id">
          <span>
            <img :src="val.image" />
          </span>
          <p>{{val.title}}</p>
        </div>
      </main>
    </div>
    <el-pagination
      class="pagination"
      :small="width <= 768"
      background
      layout="prev, pager, next"
      :total="count"
      :page-size="from.page_size"
      @current-change="change"
    >
    </el-pagination>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import bus from "@/config/emit";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      Back: {},
      count: 0,
      list: [],
      from: {
        cid: 3,
        page_no: 1,
        page_size: 16,
      },
    };
  },
  props: ["width"],
  //计算属性 类似于data概念
  computed: {
    i18n() {
      return this.$t("message");
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    change(e){
        this.from.page_no=e
        this.getArticle()
    },
    getArticle() {
      this.$getRequest("/index/getArticle", this.from).then((res) => {
        this.list=res.data.lists
        this.count=res.data.count
      });
    },
    getBack() {
      this.$getRequest("/index/getBack").then((res) => {
        this.Back = res.data;
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getBack();
    this.getArticle()
    bus.$on("lang", () => {
      if (this.$route.name == "/product") {
        this.getArticle()
      }
    });
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    this.getArticle()
  }, //如果页面有keep-alive缓存功能，激活
  deactivated() {}, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.product {
  & > .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
  }
  & > .products {
    width: 17.5rem;
    margin: 0 auto 0.875rem;

    & > main {
      margin-bottom: 0.875rem;
      display: flex;
      flex-wrap: wrap;

      & > div:nth-child(4n) {
        margin: 0 0rem 0.625rem 0;
      }

      &>div:hover{
        & > span {
          & > img {
            transform: translate(-50%, -50%) scale(1.1);
          }
        }
      }

      & > div {
        width: 3.75rem;
        height: 4.375rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        margin: 0 0.825rem 0.625rem 0;

        & > p {
          font-size: 0.25rem;
          margin: 0.225rem 0.05rem 0;
        }

        & > span {
          width: 100%;
          height: 2.8125rem;
          position: relative;
          overflow: hidden;

          & > img {
            min-width: 100%;
            min-height: 2.8125rem;
            height: 2.8125rem;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all .3s;
          }
        }
      }
    }
  }

  & > .headline {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    font-size: 0.4375rem;
    margin: 1.25rem 0;
    font-weight: bold;

    span {
      width: 1.25rem;
      height: 0.0625rem;
      border-radius: 0.0625rem;
      background: #17278d;
    }
  }

  & > header {
    width: 100%;
    height: 7.5rem;
    background-size: 100% 100% !important;
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .product {
    & > .products {
      width: 33.5rem;
      margin: 0 auto 2rem;

      & > main {
        margin-bottom: 2rem;
        justify-content: space-between;

        & > div:nth-child(4n) {
          margin: 0 0 1rem 0;
        }

        & > div {
          width: 16rem;
          height: 18rem;
          margin: 0 0 1rem 0;

          & > p {
            font-size: 1.2rem;
            margin: 0.5rem 0.5rem 0;
          }

          & > span {
            width: 100%;
            height: 12rem;
            position: relative;
            overflow: hidden;

            & > img {
              min-width: 100%;
              min-height: 12rem;
              height: 12rem;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }

    & > .headline {
      font-size: 1.8rem;
      margin: 2rem 0 2rem;

      span {
        width: 4rem;
        height: 0.3rem;
        border-radius: 0.3rem;
      }
    }

    & > header {
      height: 20rem;
      background-size: auto 100% !important;
      font-size: 1.5rem;
    }
  }
}
</style>